<template>
    <div class="label-category-wrapper">
        <Block>
            <div class="title-box">
                <div>标签分类</div>
                <el-icon @click="onCreateEdit('新建分类')"><Plus /></el-icon>
            </div>
            <div class="label-category-box">
                <el-input v-model="filterText" placeholder="分类名称" />
                <el-tree
                    ref="treeRef"
                    :data="treeData"
                    :props="defaultProps"
                    default-expand-all
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                >
                    <template #default="{ data }">
                        <div class="custom-node-box" :active="data.labelTypeNo == activeNo ? '' : null">
                            <div class="custom-node-label" @click="setActiveCategory(data.labelTypeNo)">
                                {{ data.labelTypeName }}
                            </div>
                            <div class="custom-node-btn" v-if="data.labelTypeCategory == 'CUSTOM'">
                                <el-icon color="#409EFF" @click="onCreateEdit('修改分类', data)"><Edit /></el-icon>
                                <el-icon color="#F56C6C" @click="onDel(data)"><Delete /></el-icon>
                            </div>
                        </div>
                    </template>
                </el-tree>
            </div>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { Block } from '@great/components';
import { Plus, Edit, Delete } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus';
import { showPopupBox } from '@great/utils';
import CreateEditModal from './CreateEditModal.vue';
import { runLabelService } from '@great/services';

interface Tree {
    [key: string]: any;
}
const $emit = defineEmits(['set-sctive-category']);
const filterText = ref('');
const treeRef = ref<TreeInstance>();
const defaultProps = {
    children: 'children'
};
const treeData = ref<Tree[]>([]);
const activeNo = ref<string>();
// 筛选
watch(filterText, val => {
    treeRef.value!.filter(val);
});
const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true;
    return data.labelTypeName.includes(value);
};
const setActiveCategory = (labelTypeNo?: string) => {
    if (labelTypeNo) {
        activeNo.value = labelTypeNo;
        $emit('set-sctive-category', labelTypeNo);
    }
};
// 创建/编辑
const onCreateEdit = (type: string, row?: Tree) => {
    showPopupBox(CreateEditModal, {
        type,
        row,
        callBack: getData
    });
};

// 删除
const onDel = (row: { labelTypeName: string; labelTypeNo: string }) => {
    ElMessageBox.confirm(`是否确认删除标签分类 ${row.labelTypeName} ？`, '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            await runLabelService.delCategory(row?.labelTypeNo);
            ElNotification({
                title: '删除成功！',
                type: 'success'
            });
            init();
        })
        .catch(() => {});
};

const getData = async () => {
    const res = await runLabelService.getCategory();
    treeData.value = [
        {
            labelTypeName: '内置标签',
            children: res.data.INNER
        },
        {
            labelTypeName: '自定义标签',
            children: res.data.CUSTOM
        }
    ];
    activeNo.value = res.data.INNER[0].labelTypeNo;
    $emit('set-sctive-category', activeNo.value);
};

const init = () => {
    getData();
};
init();
</script>
<style scoped lang="scss">
.label-category-wrapper {
    width: 300px;
    .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: var(--app-margin);
        margin-bottom: var(--app-margin);
        .el-icon {
            cursor: pointer;
        }
    }
    .label-category-box {
        > .el-input {
            margin-bottom: var(--app-margin);
        }
        .custom-node-box {
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .custom-node-label {
                line-height: var(--el-tree-node-content-height);
                width: calc(100% - 45px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .custom-node-btn {
                line-height: 100%;
                display: none;
                .el-icon {
                    cursor: pointer;
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
        }
        .custom-node-box[active] {
            .custom-node-label {
                color: #409eff;
            }
        }
        .custom-node-box:hover {
            .custom-node-btn {
                display: block;
            }
        }
    }
}
</style>
